<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           .active {
            background-color: yellow; /* 高亮搜索结果 */
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        td, th {
                border: 1px solid #ddd;
            text-align: center;
            padding: 8px;
        }
       
    </style>
</head>
<body>
    姓名：<input type="text" id="user"><br>
    年龄：<input type="text" id="age"><br>
    性别：<input type="radio" name="gender" value="男" id="sex">男
          <input type="radio" name="gender" value="女" id="sex2">女
    <br>
    爱好：       
    <select id="address-select" name="hobby">
        <option value="reading">阅读</option>
        <option value="swimming">游泳</option>
        <option value="painting">画画</option>
    </select>
    <br>
    <br>
    简介： <textarea rows="4" cols="50" id="brief" class="brief"></textarea>

    <br>
    <input type="submit" value="开启隔行变色" id="btntype">
    <input type="submit" value="提交" id="btn">
    <button onclick='searchFn()'>搜索</button>
				<input type="text" id="put"/>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th>简介</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>

    <script type="text/javascript">
    const user = document.querySelector('#user');
    const age = document.querySelector('#age');
    const sel = document.querySelector('#address-select');
    const btn = document.querySelector('#btn');
    const tbody = document.querySelector('#tbody');
    const input = document.querySelector('#put');
    const brief = document.querySelector('#brief');

    let arr = JSON.parse(localStorage.arr725 || '[]');

    const adressFn = (value) => {
        switch(value) {
            case 'reading': return '阅读';
            case 'swimming': return '游泳';
            case 'painting': return '画画';
            default: return '';
        }
    };

    const show = () => {
        tbody.innerHTML = arr.map((item, index) => `
            <tr>
                <td>${index + 1}</td>
                <td>${item.user}</td>
                <td>${item.age}</td>
                <td>${item.sex}</td>
                <td>${adressFn(item.address)}</td>
                <td>${item.brief}</td>
                <td>
                    <button onclick="del(${item.id})">删除</button>
                    <button onclick="edit(${item.id}, this)">修改</button>
                </td>
            </tr>
        `).join('');
    };

    btn.onclick = () => {
        if (!user.value || !age.value) {
            alert("姓名和年龄不能为空");
            return;
            show(); 
        }
        const obj = {
            id: Date.now(),
            user: user.value,
            age: age.value,
            sex: document.querySelector('input[name="gender"]:checked') ? document.querySelector('input[name="gender"]:checked').value : '',
            address: sel.value,
            brief: brief.value
        };
        arr.push(obj);
        localStorage.arr725 = JSON.stringify(arr);
        show();
    };

    const edit = (id, self) => {
        const index = arr.findIndex(v => v.id === id);
        if (index === -1) return;

        if (self.innerHTML === "修改") {
            const obj = arr[index];
            user.value = obj.user;
            age.value = obj.age;
            document.querySelector(`input[name="gender"][value="${obj.sex}"]`).checked = true;
            sel.value = obj.address;
            self.innerHTML = '完成修改';
        } else {
            arr[index] = {
                id: id,
                user: user.value,
                age: age.value,
                sex: document.querySelector('input[name="gender"]:checked').value,
                address: sel.value
            };
            localStorage.arr725 = JSON.stringify(arr);
            show();
            self.innerHTML = '修改';
        }
    };

    const del = (id) => {
        arr = arr.filter(v => v.id !== id);
        localStorage.arr725 = JSON.stringify(arr);
        show();
    };

    const searchFn = () => {
        const query = input.value.trim(); // 使用正确的变量名
        if (!query) {
            alert("搜索框不能为空");
            return;
        }

        const trs = tbody.querySelectorAll('tr');
        trs.forEach(tr => tr.classList.remove('active')); // 移除所有高亮
        arr.forEach((item, i) => {
            if (item.user.toLowerCase().includes(query.toLowerCase()) || 
                item.age.toString().includes(query) || 
                adressFn(item.name).toLowerCase().includes(query.toLowerCase()) ||
                item.brief.toLowerCase().includes(query.toLowerCase())) { // 添加对简介的搜索
                trs[i].classList.add('active'); // 添加高亮
            }
        });
    };

// 获取开启隔行变色按钮
const btntype = document.getElementById('btntype');

// 设置一个变量来追踪隔行变色是否开启
let isStriped = false;

// 隔行变色函数
const stripeTable = () => {
    const rows = tbody.getElementsByTagName('tr');
    for (let i = 0; i < rows.length; i++) {
        if (isStriped) {
            rows[i].style.backgroundColor = i % 2 === 0 ? '#f2f2f2' : 'white';
        } else {
            rows[i].style.backgroundColor = 'white';
        }
    }
};

// 点击事件监听器
btntype.addEventListener('click', () => {
    isStriped = !isStriped; // 切换隔行变色的状态
    stripeTable(); // 应用隔行变色
    // 更改按钮文字
    btntype.value = isStriped ? '关闭隔行变色' : '开启隔行变色';
});

    show();

    input.addEventListener('input', searchFn);
    </script>

</body>
</html>
